<template>
  <section :class="!showButton ? 'noButton' : null">
    <section class="friendDetail noDrag" v-if="params" :class="sm ? 'sm' : null">
      <section class="headers">
        <el-avatar :size="60" :src="params.portrait" />
        <img src="local-media://icons/sex.png" alt="" v-if="params.gender === '0'">
        <img src="local-media://icons/man.png" alt="" v-if="params.gender === '1'">
      </section>
      <span class="name">{{ params.nickName }}</span>
      <div v-if="params.isFriend === 'Y'">
        <span>
          <img src="local-media://icons/beizhu.png" alt="">
          <span>备注</span>
        </span>
        <input class="remark" type="text" placeholder="请输入好友备注" v-model="params.remark" @blur="editRemarkAction"
          maxlength="6" minlength="1">
        <img src="local-media://group_close.png" alt="" class="arrow" />
      </div>
      <!-- <div class="location">
        <span>
          <img src="local-media://icons/location.png" alt="">
          <span>地区</span>
        </span>
        <i>{{ params.provinces }}</i>
      </div> -->
      <div>
        <span>
          <img src="local-media://icons/userId.png" alt="">
          <span>ID号</span>
        </span>
        <i>{{ params.chatNo }}</i>
      </div>
      <footer class="submit" v-if="showButton">
        <SubmitButton @submit="submit" :text="params.isFriend === 'Y' ? '发消息' : '添加'" style="font-size: 16px; " />
      </footer>
    </section>
    <slot v-else></slot>
  </section>
</template>
<script>
import SubmitButton from '@/components/Login/SubmitButton.vue';
import { defineComponent, ref, watch, computed, getCurrentInstance } from 'vue';
import { useRequest } from 'vue-hooks-plus';
import { getFriendDetail, editFriendRemark } from '@/server/friend'
import { handelNotice } from '@/tool/useWebsokect'
import { useStore } from 'vuex'
import { db } from "@/config/data";
import { v4 as uuidv4 } from 'uuid';
export default defineComponent({
  props: {
    userId: {
      type: String,
      default: () => ""
    },
    sm: {
      type: Boolean,
      default: () => false
    },
    showButton: {
      type: Boolean,
      default: () => true
    }
  },
  components: {
    SubmitButton
  },
  setup (props, { emit }) {
    const store = useStore()
    const ready = computed(() => !!props?.userId)
    const { data: params } = useRequest(() => getFriendDetail(props?.userId), {
      onSuccess: res => {

      },
      ready,
      refreshDeps: [() => props?.userId]
    })

    const { run: editRemark } = useRequest(editFriendRemark, {
      onSuccess: async (res, [params]) => {
        store.dispatch('getFriendByType', { index: 3 })
        const bands = await db.conversation.get({ userId: params.userId })
        if (bands) {
          await db.conversation.update(bands.id, { nickName: params.remark })
        }
      },
      manual: true
    })
    const submit = async () => {
      if (params.value.isFriend === 'Y') {
        const search = { userId: props?.userId, msgCustomType: 0 }
        const bands = await db.conversation.get(search)
        if (bands) {
          store.commit('saveSelectSession', bands)
          await db.conversation.where({ uuid: bands.uuid }).modify({ timestamp: new Date().getTime() })
        } else {
          //创建新的会话窗口
          const customMsg = {
            msgId: uuidv4(),
            pushType: "MSG",
            timestamp: new Date().getTime(),
            msgContent: {
              content: "",
              disturb: params.value.disturb,
              msgType: "TEXT",
              top: params.value.top
            },
            fromInfo: {
              nickName: params?.value?.nickName,
              portrait: params?.value?.portrait,
              userId: params?.value?.userId,
              userType: params?.value?.userType || '',
            },
            groupInfo: {}
          }
          // if (selectSession.value?.msgCustomType === 0) customMsg.groupInfo = {}
          const result = await handelNotice(customMsg, store)
          store.commit('saveSelectSession', result)
        }
        store.commit('savePageIndex', 0)
        store.commit('saveDialogState', false)
      }
      emit("submit")
    }

    const editRemarkAction = () => {
      if (params.value.remark === '') return
      editRemark({ remark: params.value.remark, userId: props?.userId })
    }

    return {
      params,
      submit,
      editRemark,
      editRemarkAction
    }
  }
})
</script>

<style scoped lang="less">
.noButton {
  .sm {
    height: 280px !important;
  }
}

.friendDetail {
  display: flex;
  flex-direction: column;
  width: 358px;
  height: 452px;
  background: #FFFFFF;
  border-radius: 14px;
  align-items: center;
  justify-content: flex-start;
  position: relative;

  &.sm {
    width: 100%;
    height: 338px;
    border-radius: 0;

    .submit {
      bottom: 30px;
    }

    .location {
      display: none;
    }

    >div {
      padding: 0;
    }

    .remark {
      right: 20px;
      width: 130px;
    }

    :deep(.loginBtn) {
      width: 187px;
    }
  }

  .headers {
    position: relative;
    padding-top: 32px;

    >img {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 20px;
      height: 20px;
    }
  }

  .name {
    font-size: 14px;

    font-weight: 500;
    color: #242424;
    margin-top: 16px;
    margin-bottom: 25px;
  }

  .submit {
    position: absolute;
    bottom: 66px;
    left: 50%;
    transform: translateX(-50%);

  }

  >div {
    display: flex;
    padding: 0 46px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 25px;
    position: relative;

    >span {
      display: flex;
      align-items: center;

      >span {
        font-size: 14px;

        font-weight: 400;
        color: #242424;
        margin-left: 5px;
      }
    }

    >i {
      font-size: 16px;

      font-weight: 400;
      color: #787878;
    }

    >input {
      border: none;
      outline: none;
      text-align: right;
      position: absolute;
      right: 70px;
      top: 1.5px;
      font-size: 16px;
    }
  }
}
</style>
